# Skeleton

## Installation
`npm i @snack-uikit/skeleton`

[Changelog](./CHANGELOG.md)

## SkeletonContextProvider

Для централизованного управления состоянием загрузки можно использовать `SkeletonContextProvider`. Находящиеся внутри этого контекста компоненты Skeleton и SkeletonText не требуют активации через проп `loading` а берут его из контекста.

## WithSkeleton
Для группировки блоков скелетона используется компонент `WithSkeleton`. В проп `skeleton` он принимает ноду скелетона, а в `children` то, что он заменяет. Компонент также забирает пропсу `loading` из контекста.

```typescript jsx
<SkeletonContextProvider loading={isLoading}>
  <WithSkeleton skeleton={<CardSkeleton />}>
    <Card />
  </WithSkeleton>
</SkeletonContextProvider>
```

[//]: DOCUMENTATION_SECTION_START
[//]: THIS_SECTION_IS_AUTOGENERATED_PLEASE_DONT_EDIT_IT
## Skeleton
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| loading | `boolean` | - | Флаг состояния загрузки. Если значение true, будет отрисован блок скелетона, если false - children. |
| width | `Width<string \| number>` | - | Ширина блока. Можно указать значение допустимое для CSSProperty.width (пример `'60%'`, `'400px'` и т.д) |
| height | `Height<string \| number>` | - | Высота блока. Можно указать значение допустимое для CSSProperty.height (пример `'60%'`, `'400px'` и т.д) |
| borderRadius | `BorderRadius<string \| number>` | - | Радиус скругления. Можно указать значение допустимое для CSSProperty.borderRadius (пример `'10px'`, `'50%'` и т.д) |
| className | `string` | - | CSS-класс |
## SkeletonText
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| loading | `boolean` | - | Флаг состояния загрузки. Если значение true, будет отрисован блок скелетона, если false - children. |
| width | `Width<string \| number>` | - | Ширина блока. Можно указать значение допустимое для CSSProperty.width (пример `'60%'`, `'400px'` и т.д) |
| borderRadius | `BorderRadius<string \| number>` | 0.4em | Радиус скругления. Можно указать значение допустимое для CSSProperty.borderRadius (пример `'10px'`, `'50%'` и т.д) |
| className | `string` | - | CSS-класс |
| lines | `number` | 3 | Количество строк. |
| rowClassName | `string` | - | CSS-класс строки |
| lineClassName | `string` | - | CSS-класс линии |
## WithSkeleton
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| skeleton* | `ReactNode` | - | JSX скелетон |
| loading | `boolean` | - | Флаг состояния загрузки. Если значение true, будет отрисован блок скелетона, если false - children. |
## SkeletonContextProvider
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| loading* | `boolean` | - | Флаг состояния загрузки. Если значение true, будут отрисованы блоки скелетона. |


[//]: DOCUMENTATION_SECTION_END
